<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1920" height="1000"></canvas>
</body>
<script>
    var oMyCanvas=document.getElementById('canvas');
    if (oMyCanvas && oMyCanvas.getContext) {
        var context =oMyCanvas.getContext("2d");//转换为2D图形对象；
        if (context) {
            //纯色填充
            context.fillStyle   = '#00f';
            context.fillRect(0, 0, 150, 100);
            //透明度填充
            context.fillStyle   ='rgba(255, 0, 0, 0.5)';
            context.fillRect(200, 0, 100, 100);
            //绘制矩形边框
            context.fillStyle   ='rgba(255, 0, 0, 0.5)';
            context.fillRect(320,0,120,120);
            context.clearRect(350,50,50,50);//擦除画布
            //改变线条的粗细
            context.lineWidth   = 4;
            context.strokeStyle   ='blue';//边框颜色
            context.fillRect  (500,   0, 150, 150);//红色画框
            context.clearRect (510, 10,  90, 60);//擦除
            context.strokeRect(520, 25,  90, 60);//黑色描边
        }
    }
</script>
</html>